<template>
  <view class="repair-detail-container">
    <!-- 公司信息 -->
    <view class="company-info">
      <view class="company-header">
        <text class="company-name">{{companyInfo.name}}</text>
        <button class="contact-btn" @click="handleContact">电话咨询</button>
      </view>
      
      <!-- 地址信息 -->
      <view class="address-info">
        <view class="address-item">
          <text class="label">省市：</text>
          <text class="content">{{companyInfo.province}} {{companyInfo.city}}</text>
        </view>
        <view class="address-item">
          <text class="label">详细地址：</text>
          <text class="content">{{companyInfo.address}}</text>
        </view>
      </view>
    </view>

    <!-- 资质认证 -->
    <view class="qualification-section">
      <view class="section-title">资质认证</view>
      <view class="cert-list">
        <view class="cert-item" v-for="cert in certList" :key="cert.type">
          <image class="cert-icon" src="/static/cert-check.png" mode="aspectFit"></image>
          <text class="cert-name">{{cert.name}}</text>
        </view>
      </view>
    </view>

    <!-- 证明材料 -->
    <view class="materials-section">
      <view class="section-title">证明材料</view>
      <view class="materials-list">
        <image 
          v-for="(img, index) in companyInfo.materials" 
          :key="index"
          :src="img"
          mode="aspectFill"
          class="material-img"
          @click="previewImage(index)"
        />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button 
        class="action-btn collection" 
        :class="{ active: isCollected }"
        @click="handleCollection"
      >已收藏</button>
      <button 
        class="action-btn cooperation" 
        :class="{ active: isCooperated }"
        @click="handleCooperation"
      >已合作</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { relationApi, RELATION_TYPES } from '@/service/api.js'

// 公司信息
const companyInfo = ref({
  name: '北京1号科技有限责任公司',
  province: '北京市',
  city: '朝阳区',
  address: '北京市后靠沟123号加油站地址详细详细地址详细地址街道',
  materials: [] // 证明材料图片列表
})

// 资质证书列表
const certList = [
  { type: 'cert1', name: '防爆电气设备安装、维修服务资格证书' },
  { type: 'cert2', name: 'CMA检测资质' },
  { type: 'cert3', name: '管理体系认证证书' },
  { type: 'cert4', name: 'GVR培训证' },
  { type: 'cert5', name: '石油公司入围服务机构' }
]

const isCollected = ref(false)
const isCooperated = ref(false)

// 获取维修商详情
const getRepairDetail = async () => {
  try {
    const orgId = getCurrentPages().pop().options.id
    const res = await relationApi.getRelationList()
    if(res.code === undefined) {
      // 处理收藏和合作状态
      const collections = res.collections || []
      const contracts = res.contracts || []
      
      isCollected.value = collections.some(item => item.id === orgId)
      isCooperated.value = contracts.some(item => item.id === orgId)
      
      // TODO: 获取详细信息
    }
  } catch(e) {
    console.error('获取维修商详情失败:', e)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
  }
}

// 处理收藏
const handleCollection = async () => {
  try {
    const orgId = getCurrentPages().pop().options.id
    if(isCollected.value) {
      // 取消收藏
      await relationApi.disconnect(orgId)
    } else {
      // 添加收藏
      await relationApi.connect(orgId, RELATION_TYPES.COLLECTION)
    }
    isCollected.value = !isCollected.value
  } catch(e) {
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    })
  }
}

// 处理合作
const handleCooperation = async () => {
  try {
    const orgId = getCurrentPages().pop().options.id
    if(isCooperated.value) {
      // 取消合作
      await relationApi.disconnect(orgId)
    } else {
      // 添加合作
      await relationApi.connect(orgId, RELATION_TYPES.CONTRACT)
    }
    isCooperated.value = !isCooperated.value
  } catch(e) {
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    })
  }
}

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    urls: companyInfo.value.materials,
    current: index
  })
}

// 电话咨询
const handleContact = () => {
  // TODO: 实现电话咨询功能
}

onMounted(() => {
  getRepairDetail()
})
</script>

<style lang="scss" scoped>
.repair-detail-container {
  min-height: 100vh;
  background: #FFFFFF;
  padding-bottom: 120rpx; // 为底部按钮留出空间
}

// 公司信息
.company-info {
  padding: 32rpx;
  border-bottom: 20rpx solid #F5F5F5;

  .company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .company-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }

    .contact-btn {
      width: 160rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: #FFD452;
      border-radius: 32rpx;
      font-size: 28rpx;
      color: #333333;
      text-align: center;
      padding: 0;
    }
  }

  .address-info {
    .address-item {
      margin-bottom: 16rpx;
      display: flex;
      align-items: flex-start;

      .label {
        font-size: 28rpx;
        color: #333333;
        width: 140rpx;
        flex-shrink: 0;
      }

      .content {
        font-size: 28rpx;
        color: #333333;
        flex: 1;
      }
    }
  }
}

// 资质认证
.qualification-section {
  padding: 32rpx;
  border-bottom: 20rpx solid #F5F5F5;

  .section-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 32rpx;
  }

  .cert-list {
    .cert-item {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;

      .cert-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
      }

      .cert-name {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}

// 证明材料
.materials-section {
  padding: 32rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 32rpx;
  }

  .materials-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .material-img {
      width: 100%;
      height: 320rpx;
      border-radius: 8rpx;
    }
  }
}

// 底部按钮
.bottom-buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20rpx 32rpx;
  background: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 28rpx;
    margin: 0 10rpx;
    
    &.collection {
      background: #DEDEDE;
      color: #333333;
      
      &.active {
        background: #285789;
        color: #FFFFFF;
      }
    }
    
    &.cooperation {
      background: #DEDEDE;
      color: #333333;
      
      &.active {
        background: #285789;
        color: #FFFFFF;
      }
    }
  }
}
</style>